<template>
	<view>
		<view v-if="show" style="background-color: rgba(0,0,0,0.6);position: fixed;left:0;bottom: 0;"
			class="flex flex-y flex-x-end" :style="{zIndex,height:y,width:x}">

			<view style="flex:1;justify-content: flex-end;" @tap.stop="close">

			</view>
			<view style="background-color: #FFF;">
				<slot></slot>
			</view>

			<view style="width: 100%;background-color: #E9E9E9;padding-bottom: 20rpx;" class="ps-cccc"
				:class="animation? showAnimation:''">
				<view style="width:100%;flex-direction: row;width: 100vw;box-sizing: border-box;padding-right:  16rpx;"
					class="flex flex-x-center">
					<view class="password-box flex-1" style="flex:1;flex-direction: row;">
						<view @tap.stop="change(item)" v-for="(item,index) in list" :key="index" class="password-item"
							:style="{backgroundColor:item==='delete'?'#D3D3D3':item==='null'?'rgba(0,0,0,0)':'#FFF',width:item===0&&showSure?'358rpx':'174rpx',marginLeft:index%3===0?'0':'10rpx'}">
							<view @touchstart="touchstart" @touchmove="touchend" @touchend="touchend"
								@tap.stop="deleteOne" v-if="item === 'delete'"
								style="font-size: 26px;color:#333;width: 100%;height: 100%;"
								class="iconfont icon-shanchu_tuige_fill flex flex-x-y">{{''}}</view>
							<view v-else-if="item === 'null'"></view>
							<view v-else-if="item === '.'" class="digit"></view>
							<view v-else>
								<text class="number-font"
									style="font-weight: bold;font-size: 28px;color:#333;">{{item}}</text>
							</view>
						</view>
					</view>
					<view v-if="showSure" style="overflow: hidden;" class="flex flex-y">

						<view @touchstart="touchstart" @touchmove="touchend" @touchend="touchend" @tap.stop="deleteOne"
							class="password-item" style="margin-top: 10rpx;margin-bottom:10rpx;margin-left: 0;">
							<image src="/static/Delete.png" style="width: 50rpx;height: 50rpx;"></image>
						</view>
						<view @tap.stop="sure" class="hover-o  flex flex-x-y color-ffffff fs-32 flex-1"
							style="border-radius: 12rpx;background-color:#fd7f00;align-items: center;color:#FFF;flex:1;">
							<text style="color:#FFF;font-weight: bold;">下一个</text>
						</view>
					</view>
				</view>

				<safeArea></safeArea>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "password",
		props: {
			zIndex: {
				type: Number,
				default: 1000
			},
			//是否显示 小数点
			showDigit: {
				type: Boolean,
				default: false,
			},
			showSure: {
				type: Boolean,
				default: false,
			},
			animation: {
				type: Boolean,
				default: true,
			}
		},

		data() {
			return {
				y: getApp().globalData.screenHeight + 'px',
				x: getApp().globalData.screenWidth + 'px',
				showAnimation: 'open', //close
				show: false,
				list: [1, 2, 3, 4, 5, 6, 7, 8, 9, '-', 0, 'delete'],
			};
		},
		created() {
			if (this.showDigit) {
				this.list[9] = 0;
				this.list[10] = ".";

			}
			if (this.showSure) {
				this.list.pop();
			}
			if (this.animation === false) {
				this.open();
			}

		},
		methods: {
			open() {

				this.showAnimation = 'open';
				this.show = true;
				this.$emit('change', {
					show: true
				});
			},
			close() {

				if (this.animation === false) return;
				this.show = false;
				return;
				if (this.showAnimation === 'close') return;
				this.showAnimation = 'close';
				this.$emit('change', {
					show: false
				});
				setTimeout(() => {
					this.showAnimation = 'open';
				}, 250);

			},
			change(item) {

				if (item === 'null' || item === 'delete') return;
				this.$emit('add', item);
				uni.vibrateShort();
			},
			deleteOne() {
				this.$emit('delete');
				uni.vibrateShort();
			},
			touchstart() {
				this.touchstartTime = new Date().getTime();
				clearTimeout(this.timer1);
				this.timer1 = setTimeout(() => {
					this.$emit('clearAll');
					uni.vibrateShort();
				}, 600);
			},
			touchend() {
				clearTimeout(this.timer1);
			},
			sure() {
				this.$emit('sure');
				uni.vibrateShort();
			},
		}
	}
</script>

<style lang="scss">
	.password-box {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.password-item {
		width: 174rpx;
		background-color: #FFF;
		border-radius: 12rpx;
		margin-top: 10rpx;
		height: 50px;
		margin-left: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333;
		font-size: 20px;
		font-weight: bold;
		// transition:transform  0.25s;

	}

	.password-item:active {
		background-color: #f7f7f7 !important;
	}

	// .password-item:nth-child(3n + 1) {
	// 	margin-left: 0;
	// }

	.ps-cccc.open {
		// animation: show-a 0.3s;
	}

	@keyframes show-a {
		0% {
			transform: translateY(120%);
		}

		100% {
			transform: translateY(0);
		}
	}

	.ps-cccc.close {
		// animation: close-a 0.3s;
	}

	@keyframes close-a {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(120%);
		}
	}

	.digit {
		width: 8rpx;
		height: 8rpx;
		background-color: #000;
		border-radius: 50%;
	}
</style>